import ReactDOM  from "react-dom/client"
import './index.css'
//ESM方式：使用静态导入方式，是在编译器导入的 (ECMScript Module)
import bannaPic from './assets/banna.jpg'
let a="123"
/**
 * 列表渲染 使用map函数来渲染
 * 注意：项目工程中的图片可以存放到public或者src/assets
 * 两者的区别:public没有被webpack编译，src/assets是webpack编译的
 * 如果要导入assets下的图片可以采用ESM或者commonsJS的方式导入，切记不要使用相对路径
 * public下的可以使用相对路径的方式来导入
 * 网络中的图片不受限制
 */
let fruits=[
    {
        id:1,
        name:'苹果',
        price:6.8,
        pic:'/apple.jpg'
    },
    {
        id:2,
        name:'香蕉',
        price:3.4,
        pic:bannaPic
    },
    {
        id:3,
        name:'草莓',
        price:10.5,
        //commonsJS导入方式：动态导入方式，在运行的时候导入
        pic:require('./assets/caomei.jpg')
    }
]

const root=ReactDOM.createRoot(document.querySelector('#root'))
let tableEle=<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>图片</th>
            
        </tr>
    </thead>
    <tbody>
        {
            fruits.map(item=><tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td>
                    <img src={item.pic} className="pic"></img>
                </td>
            </tr>)
        }
    </tbody>
</table>
root.render(tableEle)